<template>
  <view class="fui-wrap">
    <view class="">
      <onIndex v-if="current === 0"></onIndex>
      <equipment v-if="current === 1"></equipment>
      <institution v-if="current === 3"></institution>
      <myIndex v-if="current === 4"></myIndex>
    </view>
    <fui-tabbar :tabBar="tabBar" :current="current" @init="init" @click="itemClick"></fui-tabbar>
  </view>
</template>

<script>
import onIndex from '../index/onIndex.vue';
import institution from '/pages/institution/index.vue';
import equipment from '/pages/equipment/index.vue';
import myIndex from '/pages/my/index.vue';
export default {
  components: {
    onIndex,
    institution,
    equipment,
    myIndex
  },
  data() {
    return {
      current: 0,
      tabBar: [
        {
          text: '首页',
          iconPath: '/static/tabbar/index.png',
          selectedIconPath: '/static/tabbar/index_active.png'
        },
        {
          text: '设备',
          iconPath: '/static/tabbar/institution.png',
          selectedIconPath: '/static/tabbar/institution_active.png'
        },
        {
          text: '',
          iconPath: '/static/logo.png',
          midButton: true,
          width: 106,
          height: 106,
          bottom: 26
        },
        {
          text: '备件',
          iconPath: '/static/tabbar/shop.png',
          selectedIconPath: '/static/tabbar/shop_active.png'
        },
        {
          text: '我的',
          iconPath: '/static/tabbar/my.png',
          selectedIconPath: '/static/tabbar/my_active.png'
        }
      ],
      height: 0,
      texts: [
        'Tabbar 标签栏，用于在不同功能模块之间进行切换，小图标建议尺寸84*84。',
        '该使用方式在非Nvue端只适用于简单的页面，过于复杂的页面建议仅App-Nvue端使用。',
        '非必要情况下建议使用原生tabbar。',
        '由于Nvue端Android下内容超出会强制隐藏，所以App-Nvue暂不支持中间凸起图标，可使用原生tabbar配置。'
      ]
    };
  },
  methods: {
    init(e) {
      //处理tabbar高度，避免内容被tabbar遮住
      this.height = e.height;
    },
    itemClick(e) {
      console.log(e);
      //这里可以做其他验证处理，比如登录等
      //....
      //验证通过执行以下逻辑

      if (e.index == '2') {
        uni.navigateTo({
          url: '/subpkg_device/index'
        });
        return;
      }
      this.current = e.index;
      this.setTitle(e.index);
    },
    change(e) {
      //禁止左右滑动
      if (e.detail.source == 'touch') {
        let index = e.target.current || e.detail.current;
        this.current = index;
        this.setTitle(index);
      }
    },
    setTitle(index) {
      uni.setNavigationBarTitle({
        title: ['组件', '布局', '模板', '我的'][index]
      });
    }
  }
};
</script>

<style>
/* #ifndef APP-NVUE */
page {
  font-weight: normal;
  background-color: #f6f6f6;
}

/* #endif */
.fui-wrap {
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  /* #ifndef APP-NVUE */
  width: 100%;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  box-sizing: border-box;
  /* #endif */

  /* #ifdef H5 */
  height: 100vh;
  /* #endif */
}

.fui-swiper__wrap {
  /* #ifdef APP-NVUE */
  display: flex;
  flex: 1;
  /* #endif */
  flex-direction: column;
  height: 100vh;
}

.fui-swiper__item {
  /* #ifdef APP-NVUE */
  flex: 1;
  /* #endif */
  flex-direction: row;
}

.fui-scroll__wrap {
  /* #ifndef APP-NVUE */
  width: 100%;
  /* #endif */
  /* #ifdef APP-NVUE */
  width: 750rpx;
  flex: 1;
  /* #endif */
  /* #ifndef MP-ALIPAY */
  flex-direction: column;
  /* #endif */
}

.fui-tabbar__h {
  width: 750rpx;
}

.fui-text {
  font-size: 28rpx;
  color: #b2b2b2;
  padding: 32rpx;
  /* #ifndef APP-NVUE */
  box-sizing: border-box;
  /* #endif */
}
</style>
